<template>
    <div class="table">
       <div class="crumbs">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>
            <span class="container-title-p">
              用户管理
              <i class="iconfont icon-jiantou"></i>
            </span>
              <span>用户中心</span>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="handle-box">
            <!-- <el-button type="primary"   icon="delete" class="handle-del mr10" @click="delAll">批量删除</el-button> -->
            <el-select v-model="params.status" placeholder="筛选状态" clearable class="handle-select mr10" size="small">
                <el-option label="全部状态" value=""></el-option>
                <el-option label='正常' value='0'></el-option>
                <el-option label='冻结' value='1'></el-option>
            </el-select>
            <el-select v-model="params.country" @focus="getCountry" placeholder="筛选国家" clearable class="handle-select mr10" size="small">
              <el-option label="所有国家" value=""></el-option>
              <el-option v-for="(type_item,index) in country" :key="index" :label="type_item.chineseName" :value="type_item.id"></el-option>
            </el-select>
            <el-input placeholder="用户手机号" style='width: 200px;' clearable v-model='params.phone' class="handle-select mr10" size="small"></el-input>
            <el-input placeholder="用户姓名" style='width: 200px;' clearable v-model='params.username' class="handle-select mr10" size="small"></el-input>
            <!-- <el-select v-model="select_country" placeholder="排序规则" clearable  class="handle-select mr10" size="small">
              <el-option label="综合排序" value="0"></el-option>
              <el-option label="交易总次数" value="0"></el-option>
              <el-option label="交易总金额金额" value="0"></el-option>
            </el-select>
            <el-input v-model="select_word" placeholder="筛选：姓名/手机号" class="handle-input mr10" style="width:150px;" size="small"></el-input> -->
            <!-- <el-date-picker type="date" placeholder="注册开始时间" v-model="startTime" style="width:150px;" size="small"></el-date-picker>
            <el-date-picker type="date" placeholder="注册截止时间" v-model="endTime" style="width:150px;" size="small"></el-date-picker> -->
            <el-button type="primary" icon="el-icon-search" @click="getUser" size="small">搜索</el-button>
            <el-button style="margin-top:20px;margin-left:0;" type="info" icon="el-icon-upload" class="handle-del mr10" @click="expendToExcel" size="small">导出</el-button>
        </div>
        <el-table :data="userCenter" border ref="multipleTable" style='width: 99%;' @selection-change="handleSelectionChange" :row-style="rowColor">
          <el-table-column  label="头像" align="center">
            <template scope="scope">
              <img :src="scope.row.detail.avatar" style="margin-top:5px;width: 80px;height: 80px"/>
            </template>
          </el-table-column>
          <el-table-column prop="detail.name" label="姓名" align="center">
          </el-table-column>
          <el-table-column prop="country.chineseName" label="国家" align="center">
          </el-table-column>
            <el-table-column prop="phone" label="联系方式" width="250" align="center">
          </el-table-column>
          <!-- 数据暂无，注释 -->
            <!-- <el-table-column prop="u_country" label="注册国家" align="center">
          </el-table-column>
          <el-table-column  prop="type_name" label="所在分组" align="center"> 
          </el-table-column> -->
          <!-- <el-table-column  prop="account_info" label="账户信息" align="center"> 
          </el-table-column> -->
          <el-table-column  prop="status" label="账户状态" align="center"> 
            <template slot-scope="scope">
              {{scope.row.status==0?'正常':'已冻结'}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="400" align="center">
            <template scope="scope">
              <!-- <el-button size="small" :type="scope.row.a_top>0?'info':'warning'" @click="moveGroup(scope.row)" :disabled = "scope.row.status == '1' ? true : false">移动</el-button> -->
              <el-button size="small" @click="handleEdit(scope.row)" :disabled = "scope.row.status == '1' ? true : false">设置备注</el-button>
              <el-button size="small" @click="handleDetail(scope.row)" type="primary" >查看详情</el-button>
              <el-dropdown trigger="click" type="primary" @command="handleCommand(scope.row,$event)">
                <el-button class="el-dropdown-link" size="small">
                  更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu  slot="dropdown">
                  <el-dropdown-item command='a' v-if="scope.row.status == '0'">冻结账户</el-dropdown-item>
                  <el-dropdown-item command='b' v-if="scope.row.status == '1'" @click="clickState(scope.row,false)" >解冻账户</el-dropdown-item>
                  <el-dropdown-item command='c' :disabled="scope.row.status=='1'">初始化密码</el-dropdown-item>
                  <el-dropdown-item command='d' :disabled="scope.row.status=='1'">初始化交易密码</el-dropdown-item>
                  <el-dropdown-item command='e' :disabled="scope.row.status=='1'">初始化手机号</el-dropdown-item>
                  <el-dropdown-item command='f' :disabled="scope.row.status=='1'">初始化邮箱</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <!-- <el-button size="small" @click="clickState(scope.row,true)" type="danger" >冻结账户</el-button>
              <el-button size="small" @click="clickState(scope.row,false)" type="info" >解冻账户</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            :page-size="params.size"
            @current-change ="handleCurrentChange"
            layout="prev, pager, next"
            :total="all_page">
          </el-pagination>
        </div>
        <el-dialog title="查看用户信息" :visible.sync="setDetail"  width="35%">
          <el-form label-width="140px">
            <el-form-item label='用户姓名：'>
              {{userDetail.detail.name}}
            </el-form-item>
            <el-form-item label="用户状态：">
             {{userDetail.status==0?'正常':'冻结'}}
            </el-form-item>
            <el-form-item label="认证是否通过：">
             {{userDetail.isVerification==0?'未通过':'通过'}}
            </el-form-item>
            <!-- <el-form-item label="姓名：">
             {{uShowName}}
            </el-form-item> -->
            <el-form-item label="手机号：">
             {{userDetail.phone}}
            </el-form-item>
            <el-form-item label="所属国家：">
             {{userDetail.country.chineseName}}
            </el-form-item>
            <el-form-item label="注册时间：">
             {{userDetail.createTime|moment}}
            </el-form-item>
            <el-form-item label="提交审核时间：">
             {{userDetail.updateTime|moment}}
            </el-form-item>
            <!-- <el-form-item label='生日'>
              {{userDetail.detail.birthday}}
            </el-form-item> -->
            <!-- <el-form-item label='是否申请认证：'>
              {{userDetail.isVerification==1?'已申请':"未申请"}}
            </el-form-item> -->
            <el-form-item label='是否设置交易密码 :'>
              {{userDetail.isTransactionPassword ==1?'已设置':"未设置"}}
            </el-form-item>
            <el-form-item label='邮箱：' v-if='userDetail.email'>
              {{userDetail.email}}
            </el-form-item>
            <div class='biz'>
              <el-form-item :label='item.virtualCurrency.name' v-for='(item,index) of userDetail.accounts' :key='index'>
                数量：{{item.amount}}
              </el-form-item>
            </div>
            
            <!-- <el-form-item label='性别：'>
              {{userDetail.detail.sex==2?'女':userDetail.detail.sex==1?'男':'未知'}}
            </el-form-item> -->
            <el-form-item label='备注'>
              {{userDetail.detail.remark}}
            </el-form-item>
            <!-- <el-form-item label="账户信息(虚拟币持有数量)：">
             0
            </el-form-item> -->
            <!-- <el-form-item label="收款地址：">
             广东深圳
            </el-form-item> -->
          </el-form>
          <div slot="footer" class="dialog-footer">
             <el-button type="success" @click="closeDetail" size='small'>返回</el-button>
          </div>
        </el-dialog>
        <el-dialog title="添加用户备注信息" :visible.sync="setURemark"  width="30%">
          <el-form label-width="70px">
            <el-form-item label="姓名：">
             {{uShowName}}
            </el-form-item>
            <el-form-item label="手机号：">
             {{uTel}}
            </el-form-item>
            <el-form-item label="备注：">
              <el-input type="textarea" placeholder="完善会员的其他备注信息..." v-model="u_remark" auto-complete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
             <el-button type="default" @click="closeEdit" size='small'>关闭</el-button>
            <el-button type="success" @click="saveURemark" size='small'>保存</el-button>
          </div>
        </el-dialog>
        <!-- 移动到新的分组 -->
        <el-dialog title="移动用户到新分组" :visible.sync="setNewGroup" width="20%">
        <el-card class="box-card">
          <!-- <div slot="header" class="clearfix">
            <span>当前所属分组：{{u_typename}}</span>
          </div> -->
          <div v-for="(t_item,index) in typeCenter" :key='index' class="text item" :class="{'curgroup':t_item.a_type_name==u_typename}" @click="moveToNewGroup(t_item.a_tid,t_item.a_type_name)">
            {{ t_item.a_type_name}}
          </div>
        </el-card>
        </el-dialog>
        <!-- 移动到新的分组 -->
        <loading v-if='loading' :tip='tip'></loading>
        <el-dialog :visible.sync="freeze" title="冻结用户"
        :before-close="handleClose"
         width="30%"
        >
          <span>{{freezeTitle}}</span>
          <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="freezed">确 定</el-button>
        </span>
        </el-dialog>
        <el-dialog :visible.sync='defaultPwd'
        :title='logTitle'
        >
        <!-- 初始化密码 -->
        <el-input placeholder="输入密码" v-if='editType=="password"' v-model='editParams.password' type='password'></el-input>
        <!-- 交易密码 -->
        <el-input placeholder="输入交易密码" v-if='editType=="jiaoyiPwd"' v-model='editParams.jiaoyiPwd' type='password'></el-input>
        <!-- 手机号 -->
        <!-- <el-input placeholder="输入国际区号，如+86" v-if='editType=="phone"' disabled v-model='editParams.itac'></el-input> -->
        <el-input placeholder="输入手机号" v-if='editType=="phone"' v-model='editParams.phone' style="margin-top: 20px;"></el-input>
        <!-- 邮箱 -->
        <el-input placeholder="输入邮箱地址" v-if='editType=="email"' type='email' v-model='editParams.email'></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="editPwd">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
import * as rpConfig from "../../../../rpConfig/constant";
import { HttpReq } from "../../../service/server";
import {api,apiGet,apiPatch} from "@/api/index";
import loading from "@/components/common/loading.vue";
import { expendExcel } from "@/service/expendExcel";
var Server = new HttpReq();
export default {
  data() {
    return {
      userId:"",
      editType:'',//初始化类型
      logTitle:'',//模态框标题
      defaultPwd:false,
      country:{},
      userDetail:{
        country:{
          chineseName:'',
        },
        detail:{

        }
      },
      editParams:{
        itac:'',
        email:'',
        password:'',
        jiaoyiPwd:'',
        phone:'',
      },
      tip:'',
      freezeData:{},
      freezeTitle:'',
      freeze:false,
      params:{
        page:0,
        size:5,
        phone:'',
        status:'',
        country:'',
        username:'',
      },
      loading:false,
      url: "./static/vuetable.json",
      userCenter: [
        // {
        //   u_avatar:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2809576112,626361756&fm=27&gp=0.jpg",
        //   u_name:"昵称",
        //   u_tel:"18817741235",
        //   u_country:"中国",
        //   type_name:"分组",
        //   account_info:"账户信息",
        //   account_state:"正常"
        // },
        //     {
        //   u_avatar:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2809576112,626361756&fm=27&gp=0.jpg",
        //   u_name:"昵称",
        //   u_tel:"18817741235",
        //   u_country:"中国",
        //   type_name:"分组",
        //   account_info:"账户信息",
        //   account_state:"正常"
      
        // },
        //     {
        //   u_avatar:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2809576112,626361756&fm=27&gp=0.jpg",
        //   u_name:"昵称",
        //   u_tel:"18817741235",
        //   u_country:"中国",
        //   type_name:"分组",
        //   account_info:"账户信息",
        //   account_state:"已冻结"

        // }
      ],
      typeCenter: [],
      cur_page: 1,
      all_page: 1,
      multipleSelection: [],
      select_cate: "",
      select_country: "",
      select_word: "",
      del_list: [],
      is_search: false,
      setURemark: false,
      setNewGroup: false,
      setDetail: false,
      uShowName: "",
      uTel: "",
      uId: 0,
      u_remark: "",
      u_typename: "",
      startTime: "",
      endTime: ""
    };
  },
  created() {
    // this.getData()
    //this.getType()
  },
  components: {
    loading
  },
  computed: {},
  methods: {
    editPwd(){
      switch(this.editType){
        case 'password':
        this.loading=true;
        this.tip='初始化密码';
          apiPatch.user.getUser(this.userId+"/init-password",{password:this.editParams.password}).then(res=>{
            this.$message.success('初始化密码成功');
            this.loading=false;
            this.defaultPwd=false;
            this.getUser();
          })
        ;break;
        case 'jiaoyiPwd':
        apiPatch.user.getUser(this.userId+"/init-transaction-password",{password:this.editParams.jiaoyiPwd}).then(res=>{
          if(res.status==200){
            this.$message.success('初始化交易密码成功');
            this.loading=false;
            this.defaultPwd=false;
            this.getUser();
          }
        })
        ;break;
        case 'phone':
          apiPatch.user.getUser(this.userId+"/init-phone",{phone:this.editParams.phone,itac:this.editParams.itac}).then(res=>{
          if(res.status==200){
            this.$message.success('初始化手机号成功');
            this.loading=false;
            this.defaultPwd=false;
            this.getUser();
          }
        })
        ;break;
        case 'email':
          apiPatch.user.getUser(this.userId+"/init-mail",{mail:this.editParams.email}).then(res=>{
          if(res.status==200){
            this.$message.success('初始化邮箱成功');
            this.loading=false;
            this.defaultPwd=false;
            this.getUser();
          }
        })
        ;break;
      }
    },
    handleCommand(row,t){
      this.userId=row.id;
      if(t=='a'){
        this.clickState(row,true);
      }
      if(t=='b'){
        this.clickState(row,false);
      }
      if(t=='c'){
        this.defaultPwd=true;
        this.editType='password';
        this.logTitle='初始化密码';
      }
      if(t=='d'){
        this.defaultPwd=true;
        this.editType='jiaoyiPwd';
        this.logTitle='初始化交易密码';
      }
      if(t=='e'){
        this.defaultPwd=true;
        this.editType='phone';
        this.logTitle='初始化手机号';
        this.editParams.itac=row.itac;
      }
      if(t=='f'){
        this.defaultPwd=true;
        this.editType='email';
        this.logTitle='初始化邮箱';
      }
    },
     getCountry(page=0){
      var params={
        page:page,
        size:10,
      }
      apiGet.country.getCountry(params).then(res=>{
        //console.log(res)
        this.country=res.content;
        // for(var i=0;i<4;i++){
        //   this.country.push(res.content)
        // }
      })
    },
    rowColor(obj,index){
      /*//console.log(obj)*/
      if(obj.row.status == '1') {
        if(index) {
          return {
            "color" : "#ddd",
          }
        }else{
          return {"color" : "#ddd",}
        }
      }
    },
    handleClose(){
      this.freeze=false;
      this.defaultPwd=false;
      this.editParams={
        itac:'',
        email:'',
        password:'',
        jiaoyiPwd:'',
        phone:'',
      }
    },
    freezed(){
      this.loading=true;
      if (this.freezeData.status == '0') {
        this.tip='冻结用户';
        apiPatch.user.getUser(this.freezeData.id+'/freeze',{}).then(res=>{
          //console.log(res);
          this.freezeData.status = '1'
          this.freeze=false;
          this.loading=false;
          this.$message.success('操作成功');
        })
      }else{
        this.tip='解冻';
        apiPatch.user.getUser(this.freezeData.id+'/cancel-freeze',{}).then(res=>{
          //console.log(res);
          this.freezeData.status = '0';
          this.freeze=false;
          this.loading=false;
          this.$message.success('操作成功');
        })
      }
    },
    clickState(row,flag){
      if(flag){
        this.freezeData=row;
        this.freezeTitle='确定冻结用户吗？';
        this.freeze=true;
      }else{
        this.freezeData=row;
        this.freezeTitle='确定解冻用户吗？';
        this.freeze=true;
      }
      
    },
    handleCurrentChange(val) {
      this.cur_page = val;
      this.params.page=val-1;
      this.getUser();
    },
    getData() {
      let self = this;
      Server._POST(
        rpConfig.API_URI + "/muser.Index/getUserByCon",
        {
          page: self.cur_page,
          a_type_id: self.select_cate,
          keyword: self.select_word
        },
        function(res) {
          self.newsCenter = res.data.data;
          self.all_page = Math.ceil(res.data.num / res.data.pagesize) * 10;
        }
      );
    },
    expendToExcel() {
      this.loading=true;
      expendExcel('http://118.31.10.184/api/user/export',this.params,['country','status']).then(res=>{
        this.loading=false;
      })
    },
    getType() {
      let self = this;
      Server._POST(rpConfig.API_URI + "/muser.Index/getUserGroup", {}, function(
        response
      ) {
        self.typeCenter = response.data;
      });
    },
    setUname(row) {
      return row.u_nickname + "(" + row.u_truename + ")";
    },
    setPosition(row) {
      return row.u_province + "(" + row.u_city + ")";
    },
    closeEdit() {
      this.setURemark = false;
    },
    moveGroup(row) {
      this.setNewGroup = true;
      this.u_typename = row.a_type_name;
      this.uId = row.u_uid;
    },
    saveURemark() {
      let self = this;
      this.loading=true;
      this.tip='设置备注中';
      // //console.log(this.uId)
      apiPatch.user.getUser(this.uId+'/remark',{remark:this.u_remark}).then(res=>{
        //console.log(res);
        this.loading=false;
        this.setURemark=false;
        this.$message.success('操作成功');
        this.getUser();
      })
      // Server._POST(
      //   rpConfig.API_URI + "/muser.Index/setURemark",
      //   { item_id: self.uId, uremark: self.u_remark },
      //   function(response) {
      //     self.$message.success(response.msg);
      //     self.closeEdit();
      //     setTimeout(() => {
      //       self.getData();
      //     }, 2000);
      //   }
      // );
    },
    moveToNewGroup(groupdId, groupName) {
      let self = this;
      if (groupName == this.u_typename) {
        this.$message.error("已经属于该分组");
        return fasle;
      }
      Server._POST(
        rpConfig.API_URI + "/muser.Index/setUGroup",
        { item_id: self.uId, groupId: groupdId },
        function(response) {
          self.$message.success(response.msg);
          self.setNewGroup = false;
          setTimeout(() => {
            self.getData();
          }, 2000);
        }
      );
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    handleEdit(row) {
      //console.log(row)
      this.uShowName = row.detail.username;
      this.uTel = row.phone;
      this.setURemark = true;
      this.uId = row.id;
      this.u_remark = row.detail.remark;
    },
    handleDetail(row) {
      this.uTel = row.u_tel;
      
      this.loading=true;
      this.tip='获取用户信息';
      apiGet.user.getUser({},true,row.id).then(res=>{
        this.userDetail=res;
        this.loading=false;
        this.setDetail = true;
      })
      
    },
    closeDetail(){
      this.setDetail = false;
    },
    handleDelete(row) {
      let self = this;
      Server._POST(
        rpConfig.API_URI + "/muser.Index/deleteUserItem",
        { item_id: [row.u_uid] },
        function(response) {
          self.$message.success(response.msg);
          self.getData();
        }
      );
    },
    delAll() {
      const self = this,
        length = self.multipleSelection.length;
      let delArr = [];
      for (let i = 0; i < length; i++) {
        delArr.push(self.multipleSelection[i].u_uid);
      }
      if (delArr.length == 0) {
        self.$message.info("请选择要删除的记录");
      } else {
        Server._POST(
          rpConfig.API_URI + "/muser.Index/deleteUserItem",
          { item_id: delArr },
          function(response) {
            self.$message.success(response.msg);
            self.getData();
          }
        );
      }

      self.multipleSelection = [];
    },
    getUser(){
      this.loading=true;
      this.tip='获取用户列表';
      apiGet.user.getUser(this.params).then(res=>{
        this.loading=false;
        this.userCenter=res.content;
        this.all_page=res.totalElements;
        //console.log(res);
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  },
  mounted () {
    this.getUser();
  }
};
</script>

<style scoped>
.biz{
  border-bottom: 1px solid #ddd;
  border-top:1px solid #ddd;
  margin-bottom: 10px;
}
.handle-box {
  margin-bottom: 20px;
}
.handle-select {
  width: 120px;
}
.handle-input {
  width: 300px;
  display: inline-block;
}
.item {
  margin-bottom: 18px;
  cursor: pointer;
}
.item:hover {
  color: #44b549;
}
.el-dropdown-menu__item{
  font-size: 0.8rem;
}
.curgroup {
  color: #44b549;
}

</style>